<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
<h:head>
</h:head>
<h:body>
	<rich:panel id="panelListCuenta">
		<f:facet name="header">
			<h:outputText value="#{labels['titleListPanelCuenta']}" styleClass="panelTitle"/>
		</f:facet>

		<h:form id="formListCuenta1">
			<rich:toolbar height="30px" id="menuListCuenta">
				<rich:dropDownMenu>
					<f:facet name="label">
						<h:panelGrid>
							<h:outputText value="#{labels['orderBy']}" styleClass="menuLabel"/>
						</h:panelGrid>
					</f:facet>

					<rich:menuItem label="#{labels['code']}"
						action="#{cuentaBean.ordenaCuentasListById()}" >
						
					</rich:menuItem>

					<rich:menuSeparator />

					<rich:menuItem label="#{labels['balance']}"
						action="#{cuentaBean.ordenaCuentasListBySaldo()}" >
						
					</rich:menuItem>
				</rich:dropDownMenu>
			</rich:toolbar>
		</h:form>
		<h:form id="formListCuenta2">
			<div align="center">
				<rich:dataTable id="tableListCuenta" 
					value="#{cuentaBean.cuentasList}" var="v_cuenta"
					iterationStatusVar="it" rows="20" width="300px" >
					<f:facet name="caption">
						<h:outputText value="#{labels['titleListPanelCuenta']}" />
						<a4j:commandLink rendered="#{cuentaBean.sessionBean.activaPanelErrorCuenta}">
							<h:graphicImage value="/page/images/popcorn-icon.png" alt="error" />
							<rich:tooltip styleClass="error">
								<p>#{movimientoBean.sessionBean.msjPanelError}</p>
								<p>#{movimientoBean.sessionBean.toolTipError}</p>
							</rich:tooltip>
						</a4j:commandLink>
					</f:facet>

					<rich:column sortBy="#{v_cuenta.cuentaId}">
						<f:facet name="header">#{labels['code']}</f:facet>
						<h:outputText value="#{v_cuenta.cuentaId}" id="cta_id" />

					</rich:column>
					<rich:column sortBy="#{v_cuenta.saldo}">
						<f:facet name="header">#{labels['balance']}</f:facet>
						<h:outputText value="#{v_cuenta.saldo}" id="saldo" />

					</rich:column>
					
										
					<rich:column>
						<f:facet name="header">#{labels['delete']}</f:facet>
						<div align="center">
							<a4j:commandLink styleClass="no-decor" execute="@this"
								render="@form"
								oncomplete="#{rich:component('confirmPane')}.show()">
								<h:graphicImage value="/page/images/delete.png" alt="borrar" />
								<a4j:param value="#{v_cuenta.cuentaId}"
									assignTo="#{sessionBean.currentIndex}" />

							</a4j:commandLink>
						</div>
					</rich:column>
					<rich:column>
						<f:facet name="header">#{labels['edit']}</f:facet>
						<div align="center">
							<a4j:commandLink styleClass="no-decor" render="editGrid"
								execute="@this"
								oncomplete="#{rich:component('editPane')}.show()">
								<h:graphicImage value="/page/images/edit.png" alt="editar" />
								<a4j:param value="#{v_cuenta.cuentaId}"
									assignTo="#{sessionBean.currentIndex}" />
								<f:setPropertyActionListener target="#{cuentaBean.cuenta}"
									value="#{v_cuenta}" />

							</a4j:commandLink>
						</div>
					</rich:column>
					<f:facet name="footer">
						<rich:dataScroller />
					</f:facet>
				</rich:dataTable>

				<a4j:jsFunction name="remove" action="#{cuentaBean.borrarCuenta}"
					render="tableListCuenta" execute="@this"
					oncomplete="#{rich:component('confirmPane')}.hide();" />


				<rich:popupPanel id="confirmPane" autosized="true">
            <p>#{labels['questionDelete']}</p>
            <p>con el id: #{cuentaBean.sessionBean.currentIndex}</p>
            <br />
            <a4j:commandButton value="#{labels['cancel']}"
						onclick="#{rich:component('confirmPane')}.hide(); return false;" />
					<a4j:commandButton value="#{labels['delete']}"
						onclick="remove(); return false;" />
				</rich:popupPanel>

				<rich:popupPanel header="#{labels['popupListCuenta']}" id="editPane"
					domElementAttachment="parent" width="400" height="170">
					<h:panelGrid columns="3" id="editGrid">
						<h:outputText value="#{labels['code']}" />
						<h:outputText value="#{cuentaBean.sessionBean.currentIndex}" />
						<h:panelGroup />

						<h:outputText value="#{labels['balance']}" />
						<h:inputText value="#{cuentaBean.cuenta.saldo}" required="true"
							id="saldo" validatorMessage="#{labels['messageValidateRange']}"
							label="Saldo field">
							<f:validateDoubleRange minimum="#{labels['minRangeValue']}"
								maximum="#{labels['maxRangeValue']}" />
						</h:inputText>
						<rich:message id="saldoMsg" for="saldo" />
					</h:panelGrid>
					<a4j:commandButton value="#{labels['save']}"
						action="#{cuentaBean.actualizarCuenta}" render="tableListCuenta"
						execute="editPane"
						oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
					<a4j:commandButton value="#{labels['cancel']}"
						onclick="#{rich:component('editPane')}.hide(); return false;" />
				</rich:popupPanel>
			</div>


		</h:form>
	</rich:panel>

</h:body>
</html>